<template>
	<div style="width: 100%">
		<el-row :gutter="20">
			<!-- <el-col :sm="8" :md="6" :lg="lgdata" :xl="3" :style="{ height: cardHeight }">
				<el-card style="height: 100%" class="card">
					<div slot="header">
						<span>数据分类</span>
						<div class="collapse-btn" @click="collapseChage">
							<i v-if="!collapse" class="el-icon-s-fold"></i>
							<i v-else class="el-icon-s-unfold"></i>
						</div>
					</div>
					<el-tree
						:data="menus"
						:props="menusProps"
						accordion
						@node-click="handleNodeClick"
						node-key="code"
						:default-expanded-keys="defaultExpandedKeys"
						:style="{ overflow: 'auto', height: treeHeight }"
					/>
				</el-card>
			</el-col> -->
			<!-- <el-col :sm="16" :md="18" :lg="24 - lgdata" :xl="21" :style="{ height: cardHeight }"> -->
			<el-col :sm="24" :md="24" :lg="24" :xl="24" :style="{ height: cardHeight }">
				<el-card style="height: 100%" class="card">
					<div v-if="this.selectMenu1.name" slot="header">
						<span>{{ this.selectMenu1.name }}</span>
						<span v-if="this.selectMenu2.name">/ {{ this.selectMenu2.name }}</span>
					</div>
					<el-row>
						<el-form :inline="true" :model="searchModel">
							<el-col :sm="8" :md="8" :lg="4" :xl="3">
								<el-form-item>
									<el-input placeholder="请填写井名" v-model="searchModel.wellName" clearable maxlength="20" />
								</el-form-item>
							</el-col>
							<el-col :sm="8" :md="8" :lg="4" :xl="3">
								<el-form-item>
									<el-select v-model="searchModel.wellType" clearable placeholder="请选择井型">
										<el-option
										v-for="item in wellClassesOptions"
										:key="item"
										:label="item"
										:value="item"
										:disabled="item.disabled">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :sm="8" :md="8" :lg="4" :xl="3">
								<el-form-item>
									<el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
										<el-option
											v-for="item in wellTypeOptions"
											:key="item"
											:label="item"
											:value="item"
											:disabled="item.disabled">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :sm="16" :md="16" :lg="8" :xl="5">
								<el-form-item>
									<el-date-picker
									v-model="searchModel.startDrillDate"
									type="date"
									align="right"
									value-format="yyyy-MM-dd"
									style="width: 47%"
									placeholder="开始日期">
									</el-date-picker>
									<span style="color: #C0C0C0">&nbsp;-&nbsp;</span>
									<el-date-picker
									v-model="searchModel.endDrillDate"
									type="date"
									align="right"
									value-format="yyyy-MM-dd"
									style="width: 47%"
									placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :sm="8" :md="8" :lg="4" :xl="3">
								<el-form-item>
									<el-button type="primary" @click="submitSearchModel">查询</el-button>
								</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<!-- 表格 -->
					<el-row style="width: 100%">
						<el-table
							:data="tableData"
							border
							style="width: 100%; font-size: 10px"
							:max-height="tableHeight"
							:header-row-style="rowStyle"
							:header-cell-style="cellStyle"
							:row-style="rowStyle"
							:cell-style="cellStyle"
							stripe
						>
							<el-table-column
							
								v-if="tableHead[0]"
								:label="tableHead[0].label"
								:prop="tableHead[0].property"
								width="100"
								align="center"
								fixed="left"
							/>
							<el-table-column
								v-for="(item, index) in tableHead.slice(1)"
								:label="item.label"
								:property="item.property"
								:key="index"
								width="80"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click="handleSee(scope.$index, scope.row)">查看</el-button
									>
									<el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 显示页数 -->
					<div class="pagination">
						<el-pagination
							background
							layout="total, prev, pager, next"
							:current-page="pageIdx"
							:page-size="pageSizes"
							:total="totalData"
							@current-change="handlePageChange"
						></el-pagination>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import {
	GetDataClassificationMenus,
	GetTableHead,
	GetTableData,
	ListDataDictByCondition
} from '../../api/module/dataClassification/data_classification'
import {
	DeleteOneWell,
    FindWellByCondition
} from '../../api/module/dataClassification/basicData/well'
export default {
	data () {
		return {
			collapse: false, //侧边栏初始折叠
			lgdata: 5, //页面栅栏大小
			//菜单栏
			menus: [],
			menusProps: {
				children: 'children',
				label: 'name'
			},
			defaultExpandedKeys: [],
			selectMenu1: {},
			selectMenu2: {
				menuName: ''
			},
			//数据查询
			searchModel: { //查询部分默认的绑定值
				wellName: '', //井名
				wellType: '', //井型
				wellCategory: '', //井别
                startDrillDate: '', //开钻日期
                endDrillDate: '', //完钻日期
                currentPage: 1, //当前页
				pageSize: 10 //页大小
			},
			//表格数据
			tableData: [],
			tableHead: [],
			//下拉框字典
            wellTypeOptions: [], //井型
            wellClassesOptions: [], // 井别
			//分页条数据
            pageIdx: 1,
			pageSizes: 10,
			totalData: 0,
			//样式
			cardHeight: '',
			tableHeight: 0,
			treeHeight: '',
			rowStyle: { height: '30px' },
			cellStyle: {
				padding: 0,
			},
			navigationWidth: 0,
			isShowSliderGetters: true,
		}
	},
	created () {
		this.getWidth()
		window.onresize = () => {
			this.getWidth()
		}
	},
	mounted () {
		this.getDataClassificationMenus()
	},
	methods: {
		// 侧边栏折叠
		collapseChage () {
			if (this.collapse == false) {
				this.lgdata = 1;
			} else {
				this.lgdata = 5;
			}
			this.collapse = !this.collapse;
		},
		// 获取宽度
		getWidth () {
			let height = window.innerHeight
			let width = window.innerWidth
			this.cardHeight = height + 'px'
			this.treeHeight = height + 'px'
			if (width >= 1200) {
				this.tableHeight = height - 130
			} else {
				this.tableHeight = height - 290
			}
			this.rowStyle.height = this.tableHeight / 12 + 'px'
		},
		// 获取菜单
		getDataClassificationMenus () {
			GetDataClassificationMenus()
				.then(res => {
					this.menus = res.data
					// console.log('tree',res.data)
					this.selectMenu1 = { ...this.menus[0] }
					this.defaultExpandedKeys.push(this.selectMenu1.code)
					this.selectMenu2 = { ...this.menus[0].children[0] }
					this.getTableHead()
					this.getTableData()
				})
				.catch(err => {
					console.log("获取菜单" + err);
					this.$message.error('查询出错，请刷新！')
				})
		},
		// 获取表头
		getTableHead () {
			GetTableHead(this.selectMenu2.menuName)
				.then(res => {
					this.tableHead = res.data
					// console.log(this.tableHead)
					//获取到表头后，获取下拉框
                    this.ListDataDictByConditionWellType()//井型字典
                    this.ListDataDictByConditionWellClasses() //井别字典
				})
				// .catch(err => {
				// 	console.log("获取表头" + err);
				// 	this.$message.error('查询出错，请刷新！')
				// })
		},
		// 获取表格数据
		getTableData () {
			GetTableData(
				this.selectMenu2.menuName,
				this.pageIdx,
				this.pageSizes,
				this.searchModel
			)
            .then(res => {
                //console.log(res)
                if (res.data) {
                    this.tableData = res.data.data
                    // console.log(this.tableData)
                } else {
                    this.tableData = []
                }
                this.totalData = res.data.total
            })
            .catch(err => {
                console.log("获取表格数据" + err)
                this.$message.error('查询出错，请刷新！')
            })
		},
		//获取井型下拉列表
        ListDataDictByConditionWellClasses() {
            ListDataDictByCondition("井型")
            .then(res => {
                // console.log(res.data)
                this.wellClassesOptions = res.data
            })
        },
        //获取井别下拉列表
       ListDataDictByConditionWellType() {
            ListDataDictByCondition("井别")
            .then(res => {
                // console.log(res.data)
                this.wellTypeOptions = res.data
            })
        },
		//删除数据
        DeleteOneWell(wellid) {
            //console.log(this.form.wellid)
            DeleteOneWell(wellid) 
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("删除数据" + err)
                this.$message.error('删除出错，请刷新！')
            })
        },
		//查询数据
        FindWellByCondition() {
            FindWellByCondition(this.searchModel)
            .then(res => {
                // console.log(res)  //res.data.wells.records[0]
                this.tableData = res.data.wells.records
            })
            .catch(err => {
                console.log("查询数据" + err)
                this.$message.error('查询出错，请刷新！')
            })
        },
		// 点击菜单节点
		handleNodeClick (data) {
			if (data.children.length == 0) {
				this.selectMenu2 = { ...data }
				this.getTableHead()
				this.getTableData()
			} else {
				this.selectMenu1 = { ...data }
				//console.log(this.selectMenu1);
				this.defaultExpandedKeys[0] = this.selectMenu1.code
				this.selectMenu2 = {}
				this.tableHead = []
				this.tableData = []
				this.totalData = 0
			}
		},
		// 点击查询
		submitSearchModel () {
			this.pageIdx = 1
			this.FindWellByCondition()
		},
		// 点击具体行数据--查看
		handleSee (index, row) {
			//console.log(index, row);
			// console.log("wellName: " + row.wellname)
			this.$router.push({
				name: 'Data_Report',
				params: {
					wellName: row.wellname
				}
			})
		},
		//点击具体行数据--删除
		handleDelete (index, row) {
			console.log(index)
            console.log(row)
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$message.success('删除成功')
                this.tableData.splice(index, 1)
                //删除数据库数据操作
                this.DeleteOneWell(row.wellid)
            })
            .catch(() => {});
		},
		// 分页导航
        handlePageChange(page) {
            // this.$set(this.pageIdx, page)
            this.pageIdx = page
            this.currentPage = page
            // console.log(this.pageIdx)
            this.FindWellByCondition()
        },
		// 存储点击数据行对象
		storageObj (obj) {
			var checkedIdStr = JSON.stringify(obj); //转化为JSON字符串
			sessionStorage.setItem("tableName", checkedIdStr);
		}
	}
}
</script>

<style scoped>
.card >>> .el-card__body {
	padding: 5px;
}
.card >>> .el-card__header {
	font-size: 17px;
	padding: 5px 10px;
	/* padding: 5px 10px !important; */
	height: 40px;
	line-height: 30px;
	background-color: #eef0f6;
}

.collapse-btn {
	float: right;
	cursor: pointer;
	line-height: 30px;
}
.collapse-btn:hover {
	background: rgb(218, 221, 226);
}

.el-form-item {
	height: 40px;
	margin: 5px 10px 5px 0;
	width: 90%;
}
</style>
